<template>
    <div class="content">
        <div class="index-header-box" id="head">
            <div class="index-header">
                <div @click="$router.back(-1)" class="back">
                    <van-icon name="arrow-left"/>
                </div>
                <div class="title">对比详情</div>
            </div>
        </div>

        <div class="pk-header">
            <div class="head-left">
                <div class="left-item">
                    <span class="mr">●</span>标配
                </div>
                <div class="left-item">
                    <span class="mr">○</span>选配
                </div>
                <div class="left-item">
                    <span class="mr1">-</span>无
                </div>

                <div class="left-txt">仅看不同</div>
                <van-switch class="left-switch" v-model="checked" @change="changeSwitch" />
            </div>
            <div class="head-right">
                <van-swipe :show-indicators="false" :loop="false" :width="145" ref="head" @change="changeHead">


                    <van-swipe-item v-for="(item,index) in one" :key="index">
                        <div class="right-item">
                            <div class="item-img">
                                <van-image class="item-img" lazy-load :src="img(item.car.series_thumb,item.head_img)">
                                    <template v-slot:loading>
                                        <van-loading type="spinner" size="20"/>
                                    </template>
                                </van-image>
                            </div>
                            <div class="item-title">{{item.car.car_name}}</div>
                            <div class="item-price">{{item.price}}万</div>
                        </div>
                    </van-swipe-item>


                    <van-swipe-item v-for="(item,index) in other" :key="index">
                        <div class="right-item">
                            <div class="item-img">
                                <van-image class="item-img" lazy-load :src="img(item.car.series_thumb,item.head_img)">
                                    <template v-slot:loading>
                                        <van-loading type="spinner" size="20"/>
                                    </template>
                                </van-image>
                            </div>
                            <div class="item-title">{{item.car.car_name}}</div>
                            <div class="item-price">{{item.price}}万</div>
                        </div>
                    </van-swipe-item>

                </van-swipe>

            </div>
        </div>

        <div class="pk-body">
            <div class="body-left">
                <template v-for="(item,index) in one">
                <div class="left-item mt">
                    <div class="left-title">车辆信息</div>
                    售价
                </div>
                <div class="left-item">
                    车辆类型
                </div>
                <div class="left-item">
                    车身颜色
                </div>
                <div class="left-item">
                    上牌时间
                </div>
                <div class="left-item">
                    行驶里程
                </div>
                <div class="left-item">
                    牌照归属地
                </div>
                <div class="left-item">
                    过户次数
                </div>
                <div class="left-item">
                    有无抵押
                </div>
                <div class="left-item">
                    车辆性质
                </div>
                <div class="left-item">
                    变速箱
                </div>

                    <div class="left-item" v-show="checks[index]" v-for="(items,index) in item.car" v-if="index!='series_thumb'" :class="{'mt':checkKey(index)}">
                        <div class="left-title" v-if="checkKey(index)">{{checkKey(index)}}</div>

                        {{menu[index]}}
                    </div>
                </template>
            </div>
            <div class="body-right">
                <van-swipe :show-indicators="false" :loop="false" :width="145" ref="body" @change="changeBody">
                    <van-swipe-item v-for="(item,index) in one" :key="index">
                        <div class="right-item">
                            <div class="item-left mt">{{item.price}}万</div>
                            <div class="item-left">{{item.car_level}}</div>
                            <div class="item-left">{{item.car_color}}</div>
                            <div class="item-left">{{item.card_time>0?stampToDate(item.card_time,2):'-'}}</div>
                            <div class="item-left">{{item.mileage}}万公里</div>
                            <div class="item-left">{{item.card_come}}</div>
                            <div class="item-left">{{item.transfer_times}}次</div>
                            <div class="item-left">{{item.pledge}}</div>
                            <div class="item-left">{{item.nature}}</div>
                            <div class="item-left">{{item.car_case>0?item.car_case==1?'手动档':"自动档":"-"}}</div>

                            <div class="item-left" v-show="checks[index]" v-for="(items,index) in item.car" v-if="index!='series_thumb'" :class="{'mt':checkKey(index)}">
                                {{items}}
                            </div>
                        </div>
                    </van-swipe-item>


                    <van-swipe-item v-for="(item,index) in other" :key="index">
                        <div class="right-item">
                            <div class="item-left mt">{{item.price}}万</div>
                            <div class="item-left">{{item.car_level}}</div>
                            <div class="item-left">{{item.car_color}}</div>
                            <div class="item-left">{{item.card_time>0?stampToDate(item.card_time,2):'-'}}</div>
                            <div class="item-left">{{item.mileage}}万公里</div>
                            <div class="item-left">{{item.card_come}}</div>
                            <div class="item-left">{{item.transfer_times}}次</div>
                            <div class="item-left">{{item.pledge}}</div>
                            <div class="item-left">{{item.nature}}</div>
                            <div class="item-left">{{item.car_case>0?item.car_case==1?'手动档':"自动档":"-"}}</div>
                            <div class="item-left" v-show="checks[index]" v-for="(items,index) in item.car" v-if="index!='series_thumb'" :class="{'mt':checkKey(index)}">
                                {{items}}
                            </div>
                        </div>
                    </van-swipe-item>

                </van-swipe>


            </div>
        </div>


    </div>
</template>

<script>
    export default {
        name: "Compare",
        components: {},
        data() {
            return {
                checked:false,

                one:[],
                other:[],
                menu:[],

                exps:{
                    'brand':'基本参数',
                    'car_ckg':'车身',
                    'car_engine_numb':'发动机',
                    'car_dwgs':'变速箱',
                    'car_jdfs':'底盘转向',
                    'car_qzdqnx':'车轮制动',
                    'car_qaqql':'主/被动安全装备',
                    'car_qhld':'辅助/操控配置',
                    'car_tc_lx':'外部/防盗配置',
                    'car_fxpcz':'内部配置',
                    'car_zycz':'座椅配置',
                    'car_zkcsyjp':'多媒体配置',
                    'car_jgdgy':'灯光配置',
                    'car_qhddcc':'玻璃/后视镜',
                    'car_ktwdkz':'空调/冰箱',
                },

                checks:[],
            }
        },
        computed: {},
        mounted: function () {
            this.init();
        },
        methods: {
            init() {

                var id=this.$route.params.id;
                var ids=this.$route.params.other;

                this.$api.car.getPkList({id:id}).then(res=>{
                    var res=res.data.data;

                    this.one=res.list;
                    this.checks= JSON.parse(JSON.stringify(this.one[0]["car"]));;

                    Object.keys(this.checks).forEach((key, i) => {
                        this.checks[key]=true;
                    });


                    this.menu=res.menu;
                });

                this.$api.car.getPkList({id:ids}).then(res=>{
                    var res=res.data.data;

                    this.other=res.list;
                });

            },

            checkArr(){
                var that=this;


                /*
                this.one.find((o,k)=>{
                    console.log(o);
                    that.other.find((t,i)=>{
                        console.log(o.car);

                        Object.keys(o.car).forEach((key, i) => {
                            console.log(key);
                            if(o.car[key]==t.car[key]){
                                console.log(key);
                                that.checks.push(key);
                            }
                        });
                    })
                });*/
                console.log(this.checks);
            },

            changeBody(v){
                this.$refs.head.swipeTo(v);
            },

            changeHead(v){
                this.$refs.body.swipeTo(v);
            },

            checkKey(key){
                if(this.exps[`${key}`]!=undefined && this.exps[`${key}`]!="undefined"){
                    return this.exps[`${key}`];
                }else{
                    return false;
                }
            },

            changeSwitch(v){
                if(v){
                    var onecar = this.one[0].car;
                    for(var o in onecar){
                        var flag = false;
                        for(var t in this.other){
                            if(this.other[t].car[o] != onecar[o]){
                                flag = true;
                            }
                        }
                        if(!flag){
                            this.checks[o]=false;
                        }
                    }
                }else{
                    Object.keys(this.checks).forEach((key, i) => {
                        this.checks[key]=true;
                    });
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/index.scss";
</style>
